<template>
  <div>
    <div class="xian"></div>
    <el-card class="box-card">
      <el-form :inline="true" class="demo-form-inline timeSelect">
        <el-form-item class="selectHotel" v-if="$route.query.isParent != null">
          <el-select placeholder="全部分类" v-model="currentParentId" @change="search(1)">
            <el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题" class="tabItem defualtInput">
          <el-input v-model="title" class="smallInput"></el-input>
        </el-form-item>
        <el-form-item class="tabBtn">
          <el-button type="primary" icon="el-icon-search" @click="search(1)">搜索</el-button>
        </el-form-item>
        <el-form-item class="tabBtn">
          <el-button type="primary" @click="clearSearch()">清空</el-button>
        </el-form-item>
      </el-form>
      <!-- <div class="tip">温馨提示：</div> -->

      <el-table :data="tableData" class="orderTable orderTable3">
        <el-table-column prop="id" label="id" align="center">
        </el-table-column>
        <el-table-column prop="排序" label="排序(数字越大越靠前)" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sort" maxlength="5" max="99999" min="0" @blur="changeSort(this,scope.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" align="center">
        </el-table-column>
        <el-table-column prop="updateTime" label="创建日期" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.updateTime | formatDate}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click.native.prevent="editArticle(scope.row)"></el-button>
            <el-button v-show="!$route.query.delHide" type="danger" icon="el-icon-delete" size="mini" @click.native.prevent="removeAritcle(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageBox">
        <el-pagination :page-sizes="[10 ,20, 50, 100, 200, 500]" @size-change="sizeChange" @current-change="currentChange" :current-page.sync="page" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { formatDate } from "@/utils/filter.js"
import {
  GetPageOfArticleByParentId,
  GetCategoryAndSelfByRoute,
  deleteArticle,
  changeSort
} from "@/api/article"

export default {
  data() {
    return {
      parentId: this.$route.query.parentId,
      name: "articleList",
      options: [],
      tableData: [],
      currentParentId: null,
      title: "",
      page: 1,
      pageSize: 10,
      totalCount: 0
    }
  },
  created() {
    this.init()
    this.search(1)
  },
  filters: {
    formatDate(time) {
      var data = new Date(time)
      return formatDate(data, "yyyy-MM-dd")
    }
  },
  methods: {
    clearSearch() {
      this.title = ""
      this.beginDate = ""
      this.endDate = ""
      this.search(1)
    },
    sizeChange(val) {
      this.pageSize = val
      this.search(1)
    },
    currentChange(val) {
      this.page = val
      this.search(val)
    },
    init() {
      GetCategoryAndSelfByRoute(this.parentId).then(data => {
        this.options = data
      })
    },
    changeSort(e,row){
      let self = this
      changeSort(row.id,row.sort).then(data=>{
        this.search(self.page)
      })
    },
    search(page) {
      if (this.currentParentId == null) {
        this.currentParentId = parseInt(this.parentId)
      }
      GetPageOfArticleByParentId(
        this.currentParentId,
        this.title,
        page,
        this.pageSize
      ).then(res => {
        this.tableData = res.Data
        this.totalCount = res.TotalCount
      })
    },
    editArticle(row) {
      var url = "/addArticle?id=" + row.id + "&parentId=" + row.parentId
      if (this.$route.query.content != null) {
        url += "&content=" + this.$route.query.content
      }
      if (this.$route.query.pro != null) {
        url += "&pro=" + this.$route.query.pro
      }
      if (this.$route.query.title2 != null) {
        url += "&title2=" + this.$route.query.title2
      }
      if (this.$route.query.img != null) {
        url += "&img=" + this.$route.query.img
      }
      if (this.$route.query.img2 != null) {
        url += "&img2=" + this.$route.query.img
      }
      if (this.$route.query.file != null) {
        url += "&file=" + this.$route.query.file
      }
      if (this.$route.query.view != null) {
        url += "&view=" + this.$route.query.view
      }
      if (this.$route.query.down != null) {
        url += "&down=" + this.$route.query.down
      }
      if (this.$route.query.updateTime != null) {
        url += "&updateTime=" + this.$route.query.updateTime
      }
      if (this.$route.query.isdesiger != null) {
        url += "&isdesiger=" + this.$route.query.isdesiger
      }

      if (this.$route.query.url != null) {
        url += "&url=" + this.$route.query.url
      }
      if(this.$route.query.join != null){
        url += "&join=" + this.$route.query.join
      }
      this.$router.push(url)
    },
    removeAritcle(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteArticle(row.id).then(data => {
          this.showDelete = false
          if (data.result) {
            this.$message({
              message: "删除成功！",
              type: "success"
            })
          }
          this.search(1)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@media screen and (max-width: 1800px) {
  .timeSelect .el-form-item {
    margin-right: 5px;
  }
  //.selectHotel{ width: 140px;}
  .smallInput {
    max-width: 140px;
  }
  // .defualtInput .el-form-item__content{ width:120px !important;}
  // .calendarItem .el-form-item__content{ width: 140px !important;}
}
@media screen and (max-width: 768px) {
  .smallInput {
    max-width: none;
    width: 100%;
  }
}
</style>
